<script src="fuzhu.js"></script>

<style>
.tem3 .photos{ padding:20px 0 0 0; overflow: hidden;}
.tem3 .photos li{ float: left;width:50%; height: 290px; text-align: center;  }
.tem3 .photos li a{ display:inline-block; width:94%; height: 250px; background: #eee;overflow: hidden; }
.tem3 .photos li p{ font-size: 16px;color:#666; }
.tem3 .photos li img{ max-width:none; }
/* phone*/
.screen-phone .info_page .temBox{ padding:0.35rem 0; }
.screen-phone .tem3 .photos{ padding:0; }
.screen-phone .tem3 .photos li{ height: 3.2rem; }
.screen-phone .tem3 .photos li a{ width: 3.65rem; height: 2.4rem; }
.screen-phone .tem3 .photos li p{ font-size: 15px; }
.screen-phone .pager{ margin:0;padding:0 10px; }
</style>  

<div id="template" name="tem3">
  <div class="tem3">
    <ul class="photos">
      <li>
        <a href="imgs/ban1.jpg" data-toggle="lightbox" data-group="image-group-1" data-caption="小图看大图">
          <img src="imgs/ban1.jpg" alt="" class="dp-center">
        </a>
        <p>校园风采</p>
      </li>
      <li>
        <a href="imgs/ban2.jpg" data-toggle="lightbox" data-group="image-group-1" data-caption="小图看大图">
          <img src="imgs/ban2.jpg" alt="" class="dp-center">
        </a>
        <p>校园风采</p>
      </li>
      <li>
        <a href="imgs/ban3.jpg" data-toggle="lightbox" data-group="image-group-1" data-caption="小图看大图">
          <img src="imgs/ban3.jpg" alt="" class="dp-center">
        </a>
        <p>校园风采</p>
      </li>
      <li>
        <a href="imgs/ban1.jpg" data-toggle="lightbox" data-group="image-group-1" data-caption="小图看大图">
          <img src="imgs/ban1.jpg" alt="" class="dp-center">
        </a>
        <p>校园风采</p>
      </li>
    </ul>
    <div style="text-align: center;">
      <ul id="myPager" class="pager"></ul>
    </div>
  </div>
</div>


<script id="script" type="text/text">
  $('[data-toggle="lightbox"]').lightbox();
  // 分页器
  $('#myPager').pager({
    page: 1,             //初始化显示第一页
    recTotal: 90,        //总条目
    recPerPage:15,       //每页显示的条目数
    elementCreator: function(element, $pager, state) {
      if (element === 'first_icon') {
          return $('<a class="pager-item" data-page="1" href="#page=1">首页</a>');
      }              
      if (element === 'last_icon') {
          return $('<a class="pager-item" data-page="'+state.totalPage+'" href="#page='+state.totalPage+'">尾页</a>');
      }

      if (element === 'prev_icon') {
          return $('<a class="pager-item" data-page="'+state.prev+'" href="#page='+state.prev+'">上一页</a>');
      }
      if (element === 'next_icon') {
          return $('<a class="pager-item" data-page="'+state.next+'" href="#page='+state.next+'">下一页</a>');
      }
      return false;
    },
    onPageChange:function(data){
      // console.log(data)
    },
  });
</script>